<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="Rummy游戏详情" width="70%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box" style="padding:0;padding-bottom:30px;">
      <div class="flex marginL20">
        <p class="box-title marginR20">游戏类型:【<span class="mustPass">{{gameType(formParams.game_id)}}</span>】</p>
        <p class="box-title marginR20">用户ID:【<span class="mustPass">{{formParams.user_id}}</span>】{{formParams.nickname}}</p>
        <p class="box-title">牌局号:【<span class="mustPass">{{formParams.game_number}}</span>】</p>
      </div>
      <!-- 发牌 -->
      <div v-if="dealCardsData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20" style="margin-bottom:10px;">荷官发牌 :</p>
        <div class="border_card">
          <div class="fontSize16 marginT5 flex" v-for="(item,index) in dealCardsData" :key="index">
            <div class="mustPass userName">{{item.user_id>0?'玩家【'+item.user_id+'】'+item.nickname:'机器人【'+item.user_id+'】'+item.nickname}}</div>
            <div class="pik-flex" v-for="(third,two) in item.group_cards_details" :key="two+'qqq'">
              <span class="collapse_content gambling" v-for="(pik,three) in third" :key="three+'123qwe'">
                <!-- 4黑桃 3红桃 2梅花 1方片 5小鬼 6大鬼 -->
                <div>
                  <img :src="pikShow(pik)" alt=""> {{ pik.poker_num }}
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 房间抵注(发牌数据) -->
      <div v-if="dealCardsData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20 marginT20" style="margin-bottom:10px;">房间抵注 :<span class="colorGre fontSize16 marginL10">{{formParams.base_bet}}</span></p>
        <div class="border_card">
          <div class="fontSize16 marginT5 flex" v-for="(item,index) in dealCardsData" :key="index">
            <div class="mustPass userName">{{item.user_id>0?'玩家【'+item.user_id+'】'+item.nickname:'机器人【'+item.user_id+'】'+item.nickname}}</div>
            <span class="gambling">游戏前卢比:<span class="colorGre fontSize16 marginL10">{{$public.mathNumberDivideWan(item.player_enter_chips)}}</span></span>
          </div>
        </div>
      </div>
      <!-- 输赢 -->
      <div v-if="winningData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20 marginT20" style="margin-bottom:10px;">输赢 :</p>
        <div class="border_card">
          <div class="fontSize16 marginT5 flex" v-for="(item,index) in winningData" :key="index">
            <div class="mustPass userName">{{item.user_id>0?'玩家【'+item.user_id+'】'+item.nickname:'机器人【'+item.user_id+'】'+item.nickname}}</div>
            <span class="gambling">卢比:<span :class="item.win_lose>0?'colorGre':'colorRed'" class="fontSize16 marginL10">{{$public.mathNumberDivideWan(item.win_lose)}}</span></span>
          </div>
        </div>
      </div>
      <!-- 牌局 -->
      <div v-if="roundData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20" style="margin-bottom:15px;">牌局:</p>
        <div class="border_card">
          <div v-for="(item,index) in roundData" :key="index">
            <el-collapse v-model="dealCardsNames">
              <el-collapse-item>
                <template slot="title">
                  <span class="colorGre fontSize16 marginL20">第{{item.time}}轮</span>
                </template>
                <!-- <div class="flexStartDetween paddingT10" v-for="(second,two) in item.data" :key="two" style="background:#F9F9F9;border-bottom:1px solid #ededed;">
                  <div class="flexStart">
                    <div class="mustPass userName marginR20">{{second.user_id>0?'玩家【'+second.user_id+'】'+second.nickname:robotLabel(second.robot_kill_type)+'【'+second.user_id+'】'+second.nickname}}</div>
                    <span class="collapse_content gambling">{{second.action}}</span>
                  </div>
                  <span class="marginR10">{{second.action_time_str}}</span>
                </div> -->
                <div class="flexStartDetween gambling" v-for="(second,two) in item.data" :key="two" style="background:#F9F9F9;border-bottom:1px solid #ededed;">
                  <div class="flexStart">
                    <div class="mustPass userName" v-if="second.data_type == 6">明牌</div>
                    <div class="mustPass userName" v-else-if="second.data_type == 7">鬼牌</div>
                    <div class="mustPass userName" v-else>{{second.user_id>0?'玩家【'+second.user_id+'】'+second.nickname:'机器人【'+second.user_id+'】'+second.nickname}}</div>
                    <span v-if="second.win_lose" :class="second.win_lose>0?'colorGre':'colorRed'">【{{second.win_lose>0?'胜':'负'}}】</span>
                    <span v-if="second.action" class="colorYe width100px text-cut">
                        {{second.action}}
                        <span v-for="(third,three) in second.action_cards_details" :key="three" class="marginR5">
                          {{third.poker_remark}}
                        </span>
                    </span>
                    <div v-if="second.data_type == 6 || second.data_type == 7">
                      <div class="pik-flex"  v-for="(gp,gpindex) in second.cards_data" :key="gpindex+'gp'">
                        <div>
                          <img :src="pikShow(gp)" alt=""> {{ gp.poker_num }}
                        </div>
                      </div>
                    </div>
                    <div class="pik-flex" v-for="(third,two) in second.group_cards_details" :key="two+'qqq'">
                      <span class="collapse_content gambling" v-for="(pik,three) in third" :key="three+'123qwe'">
                        <!-- 4黑桃 3红桃 2梅花 1方片 5小鬼 6大鬼 -->
                        <div>
                          <img :src="pikShow(pik)" alt=""> {{ pik.poker_num }}
                        </div>
                      </span>
                    </div>
                  </div>
                  <span class="marginR10">{{second.action_time_str}}</span>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>   
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  getUserGameDetails
} from "@/api/player";
import {
  GAME_TYPE
} from '@/utils/enum'
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      GAME_TYPE,
      isShow: false,
      dealCardsData:[], //发牌
      roomData:[], //房间抵注
      winningData:[], //输赢
      roundData:[], //轮次
      dealCardsNames:[]
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        that.getGameDetailsInfo()
      }
    }
  },
  mounted () { },
  methods: {
    // 游戏详情
    async getGameDetailsInfo () {
      let that = this;
      that.dealCardsData=[] //发牌
      that.roomData=[] //房间抵注
      that.winningData=[] //输赢
      that.roundData=[] //轮次
      const response = await getUserGameDetails({game_number:that.formParams.game_number})
      if (response.code == 1) {
        if (response.data) {
          // 牌型信息
          if(response.data.info_data){
            for (const key in response.data.info_data) {
              // 发牌
              if(key==1 && response.data.info_data[key]){
                that.dealCardsData=response.data.info_data[key]
              }
              // // 房间抵注
              // if(key==3 && response.data.info_data[key]){
              //   that.roomData=response.data.info_data[key]
              // }
              // 输赢
              if(key==8 && response.data.info_data[key]){
                that.winningData=response.data.info_data[key]
              }
            }
          }
          // 牌局
          if(response.data.round_data){
            for (const key in response.data.round_data) {
              that.roundData.push({time:key,data:response.data.round_data[key]})
            }
          }
        }
      }else{
        that.$message.error(response.msg)
      }
    },
    // 游戏类型展示
    gameType(cellValue){
      return (this.GAME_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
    pikShow(item){
      // 4黑桃 3红桃 2梅花 1方片 5小鬼 6大鬼
      switch (item.color_type) {
        case 1:
          return require('../../../icons/iocn/fk-icon.png')
        case 2:
          return require('../../../icons/iocn/mh-icon.png')
        case 3:
          return require('../../../icons/iocn/red-icon.png')
        case 4:
          return require('../../../icons/iocn/ht-icon.png')
        case 5:
          return require('../../../icons/iocn/xw-icon.png')
        case 6:
          return require('../../../icons/iocn/dw-iocn.png')
      }

    }
  }
}
</script>

<style scoped lang="scss">
.cardBorder-item{
  padding:2px 10px 20px 10px;
  background-color: #F9F9F9;
  border-radius: 5px;
}
.border_card{
  max-height: 300px;
  overflow: auto;
}
.userName{
  width: 280px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.pik-flex{
  display: flex;
  padding: 5px 10px;
  margin: 5px 0;
  border-right: 2px solid #c2cdff;
}
.pik-flex:last-child{
  border: 0;
}
.collapse_content{
  display: flex;
  img{
    vertical-align: text-top;
    margin-left: 5px;
    margin-right: 2px;
  }
}
.gambling{
  font-size: 15px;
}
</style>